<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>requestAnimationFrame</title>
    <style>
        #animate {
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: gray;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <div id="animate">requestAnimationFrame</div>
    <script>
        var animate = document.querySelector("#animate");
        //console.dir(animate);
        var start = null;
        function step(timestamp) {
            console.log(timestamp);
            if (!start) start = timestamp ;

            var progress = timestamp - start;
            //获取CSS外部样式，IE使用currentStyle,非IE使用getComputedStyle()
            var style = animate.currentStyle ? animate.currentStyle : document.defaultView.getComputedStyle(animate, null);
            console.log(style.backgroundColor);
            var rgb = style.backgroundColor;
            //判断是否是rgb值，如果是取出相应的rgb
            var res = /^rgb\((\d+), (\d+), (\d+)\)$/.exec(rgb);
            //rgb转16进制
            function rgbToHex(r, g, b) { return ((r << 16) | (g << 8) | b).toString(16); }
            var hex = null;
            if (res) {
                hex = rgbToHex(res[1], res[2], res[3]);
            } else {
                hex = rgb.substr(1);
            }
            //var r_hex = (parseInt(hex) + (10000 - Math.floor(Math.random() * 20000)));
            animate.style.backgroundColor = "#" + Math.floor(Math.random() * 100000);
            animate.style.left = Math.min(progress / 10, 200) + 'px';

            if (progress < 2000) {
                window.requestAnimationFrame(step);
            }
        }

        window.requestAnimationFrame(step);
    </script>
</body>
</html>